<!-- 工作编辑页面 -->
<template>
  <div>
    <el-card style="width: 70%; margin: 0 auto; margin-top: 20px">
      <h1 style="text-align: center; font-size: 28px">岗位管理</h1>
      <el-form :model="form" label-position="top" label-width="180px">
        <div style="border: 1px solid #efefef; padding: 20px">
          <div style="font-weight: bold; font-size: 20px">公司介绍</div>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
              <el-form-item label="公司名称" style="width: 100%">
                <el-input
                  placeholder="请输入公司名称"
                  v-model="form.companyName"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="公司简介" style="width: 100%">
                <el-input
                  v-model="form.companyProfile"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入公司简介"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="公司规模">
                <el-select
                  v-model="form.companyScale"
                  placeholder="请选择公司规模"
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属行业" style="width: 100%">
                <el-select
                  v-model="form.companyIndustry"
                  placeholder="请选择公司行业"
                >
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="border: 1px solid #efefef; padding: 20px; margin-top: 20px">
          <div style="font-weight: bold; font-size: 20px">岗位介绍</div>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
              <el-form-item label="岗位名称" style="width: 100%">
                <el-input
                  v-model="form.postName"
                  placeholder="请输入岗位名称"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                v-model="form.postContent"
                label="工作内容"
                style="width: 100%"
              >
                <el-input
                  v-model="form.postContent"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入工作内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="薪资范围" style="width: 100%">
                <el-input
                  type="number"
                  v-model="form.salaryMin"
                  style="width: 48%"
                ></el-input
                >&nbsp;-&nbsp;
                <el-input
                  v-model="form.salaryMax"
                  type="number"
                  style="width: 48%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作地点" style="width: 100%">
                <!-- <el-input placeholder="请输入工作地点"></el-input> -->
                <elui-china-area-dht
                  v-model="form.locationCode"
                  isall
                  :leave="3"
                  @change="onChange"
                  style="width: 100%"
                ></elui-china-area-dht>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="border: 1px solid #efefef; padding: 20px; margin-top: 20px">
          <div style="font-weight: bold; font-size: 20px">岗位要求</div>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
              <el-form-item label="岗位要求" style="width: 100%">
                <el-input
                  v-model="form.postRequirements"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入要求内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="border: 1px solid #efefef; padding: 20px; margin-top: 20px">
          <div style="font-weight: bold; font-size: 20px">招聘要求</div>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="12">
              <el-form-item label="学历要求" style="width: 100%">
                <el-select
                  v-model="form.qualification"
                  placeholder="请选择学历要求"
                >
                  <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作经验" style="width: 100%">
                <el-select
                  v-model="form.workYears"
                  placeholder="请选择工作经验"
                >
                  <el-option
                    v-for="item in options4"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="border: 1px solid #efefef; padding: 20px; margin-top: 20px">
          <div style="font-weight: bold; font-size: 20px">福利待遇</div>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
              <el-check-tag
                v-for="(item, index) in options5"
                :key="index"
                :checked="item.value"
                type="primary"
                style="margin-right: 5px"
                @change="
                  (val) => {
                    item.value = val;
                  }
                "
              >
                {{ item.label }}
              </el-check-tag>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-button @click="save" style="margin: 20px 0; float: right"
        >保存</el-button
      >
    </el-card>
  </div>
</template>

<script setup>
import { EluiChinaAreaDht } from "elui-china-area-dht";
import { Plus } from "@element-plus/icons-vue";
import { options1, options2, options3, options4 } from "./config";
import { reqAddJob, reqGetJobDetail, reqUpdateJob } from "@/api/api";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat;
const address = ref([]);
/**表单 */
const form = ref({
  /**公司名 */
  companyName: "",
  /**公司简介 */
  companyProfile: "",
  /**公司规模 */
  companyScale: "",
  /**所属行业 */
  companyIndustry: "",
  /**岗位名称 */
  postName: "",
  /**工作内容 */
  postContent: "",
  /**工资最小值 */
  salaryMin: 0,
  /**工资最大值 */
  salaryMax: 0,
  /**工作地点 */
  workLocation: "",
  /**岗位要求 */
  postRequirements: "",
  /**学历要求 */
  qualification: "",
  /**工作经验 */
  workYears: "",
  /**福利 */
  welfare: "",
  /**地点区号 */
  locationCode: "",
});
const options5 = ref([
  { value: false, label: "五险一金" },
  { value: false, label: "年终奖" },
  { value: false, label: "带薪年假" },
  { value: false, label: "节日福利" },
  { value: false, label: "免费班车" },
  { value: false, label: "员工旅游" },
  { value: false, label: "加班补助" },
  { value: false, label: "餐补" },
  { value: false, label: "定期体检" },
]);

const onChange = (e) => {
  address.value = [];
  console.log(e);
  e.forEach((element, index) => {
    if (element !== "all") address.value.push(chinaData[e[index]].label);
  });

  console.log(address.value);
};

/**发布编辑岗位 */
const save = async () => {
  console.log(options5.value);
  form.value.locationCode = form.value.locationCode.join(",");
  form.value.workLocation = address.value.join(",");
  /**更新 */
  if (route.query.id) {
    form.value.id = route.query.id;
    form.value.welfare = options5.value
      .filter((item) => item.value)
      .map((item) => item.label)
      .join(",");
    console.log(form.value);
    const res = await reqUpdateJob(form.value);
    if (res.code == 200) {
      ElMessage.success("编辑成功");
      router.push({
        path: "/works",
      });
    } else {
      ElMessage.error(res.msg);
    }
  } else {
    form.value.welfare = options5.value
      .filter((item) => item.value)
      .map((item) => item.label)
      .join(",");
    console.log(form.value);
    const res = await reqAddJob(form.value);
    if (res.code == 200) {
      ElMessage.success("添加成功");
      router.push({
        path: "/works",
      });
    } else {
      ElMessage.error(res.msg);
    }
  }
};
/**编辑时回显 */
onMounted(async () => {
  if (route.query.id) {
    const res = await reqGetJobDetail(route.query.id);
    if (res.code == 200) {
      console.log(res.data);
      address.value = res.data.workLocation.split(",");

      Object.keys(res.data).forEach((key) => {
        if (key == "welfare") {
          res.data[key].split(",").forEach((item) => {
            options5.value.forEach((item2) => {
              if (item2.label == item) {
                item2.value = true;
              }
            });
          });
        } else {
          form.value[key] = res.data[key];
        }
      });
      form.value.locationCode = res.data.locationCode.split(",");
    }
  }
});
</script>

<style lang="scss" scoped></style>
